<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
      @multi-actions="handleMultiAction"
    >
      <template slot="data-columns">

        <el-table-column
          label="角色ID"
          prop="id">
        </el-table-column>

        <el-table-column
          label="角色名称"
          prop="roleName">
        </el-table-column>

      </template>

    </data-table>
  </div>

</template>

<script>
  import DataTable from '@/components/DataTable'

  export default {
    name: 'SysRoleList',
    components: { DataTable },
    filters: {

      // 订单状态
      userState(value) {
        const map = {
          '0': '正常',
          '1': '禁用'
        }
        return map[value]
      }
    },
    data() {
      return {

        listQuery: {
          current: 1,
          size: 10,
          params: {
          }
        },

        options: {
          // 列表请求URL
          listUrl: '/sys/role/paging',
          // 启用禁用
          stateUrl: '/sys/user/state'
        }
      }
    },

    methods: {

      // 批量操作监听
      handleMultiAction(obj) {
        if (obj.opt === 'cancel') {
          this.handleCancelOrder(obj.ids)
        }
      }
    }
  }
</script>
